<template>
  <div class="item-content">
    <div class="items-box" :class="{ hineline: isHideLine }">
      <img
        v-if="i === 0"
        src="./../assets/images/first.png"
        class="ranking-icon1"
        alt=""
      />
      <img
        v-else-if="i === 1"
        src="./../assets/images/second.png"
        class="ranking-icon1"
        alt=""
      />
      <img
        v-else-if="i === 2"
        src="./../assets/images/third.png"
        class="ranking-icon1"
        alt=""
      />
      <span v-else class="ranking-index">{{ i + 1 }}</span>
      <div class="items-infos">
        <span class="title">{{ item.title }}</span>
        <div class="time-type">
          <span style="margin-right: 20px">{{ item.createTime }}</span>
          <span>{{ item.newsTypeName }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "Items",
  props: ["item", "i", "isHideLine"],
};
</script>
<style lang="less" scoped>
.item-content {
  width: 100%;
  padding: 0 15px;

  .items-box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #d4d6da;
    cursor: pointer;

    .ranking-icon1 {
      width: 22px;
      margin-right: 18px;
    }

    .ranking-index {
      display: inline-block;
      width: 22px;
      height: 26px;
      line-height: 26px;
      margin-right: 18px;
      text-align: center;
      font-size: 20px;
      color: #3d6cb0;
    }

    .items-infos {
      display: flex;
      flex-direction: column;

      width: 100%;

      .title {
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #37383d;
      }
      .time-type {
        font-family: PingFangSC-Regular, PingFang SC;
        font-size: 14px;
        color: #9597a0;
      }
    }
  }
  .hineline {
    border: none;
  }
}
</style>
